<!-- MiddlewareItem.vue -->
<template>
  <div>
    <el-form-item class="deploy-create-form" label="应用安装" prop="name">
      <el-select v-model="item.value" filterable placeholder="请选择">
        <el-option
            v-for="(index, idx) in appsList"
            :key="idx"
            :label="index"
            :value="index">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="deploy-create-form" label="内部映射端口" prop="user">
      <el-input v-model="internalPortMapping" disabled></el-input>
    </el-form-item>

<!--    <el-form-item class="deploy-create-form" label="外部映射端口" prop="user">-->
<!--       <el-input v-model="item.port"></el-input>-->
<!--    </el-form-item>-->
  </div>
  <div>---------------------------------------------------------------------------------</div>
</template>

<script>
export default {
  props: ['item', 'appnamespaceValue', 'appsList'],
  computed: {

    internalPortMapping() {
      if (!this.item.value) return '';

      let port = '';
      switch (this.item.value) {
        case 'app1':
          port = '3306';
          break;
        case 'app2':
          port = '6379';
          break;
        case 'app3':
          port = '8080';
          break;
        default:
          port = '';
      }
      this.$emit('internalPortMappingChanged', `${this.item.value}.${this.appnamespaceValue}.svc.cluster.local:${port}`);
      return `${this.item.value}.${this.appnamespaceValue}.svc.cluster.local:${port}`;
    }
  }
}
</script>
